<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/person.css"/>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-nav-bar id="header" :title="title" left-arrow  @click-left="back" ></van-nav-bar>
				</van-row>
			</header>
			<section>
				<div id="form-style"><!--表单部分开始-->
					<van-field  label="姓名" type="name" placeholder="收货人姓名" v-model="name"></van-field>
					<van-field  
					label="电话" 
					type="tel"
					placeholder="收货人手机号"
					v-model="phone"
					v-bind:error-message=error_message
					@blur="Checkphone"
					></van-field>
					<van-popup v-model="isShow" position="bottom" :overlay="true">
						<van-area 
						:area-list="areaList"
						@cancel="cancel"
						@confirm="confirm"
						></van-area>
					</van-popup>
					<van-field  label="地区" readonly="readonly" placeholder="选择地址" v-model="address" @click="show">
					</van-field>
					<van-field  label="详细地址" placeholder="街道门牌、楼层房间号等信息" v-model="detalregion"></van-field>	
					<van-cell-group>
						<van-switch-cell title="设为默认收货地址"  v-model="checked"  :disabled=disabled></van-switch-cell>
					</van-cell>
					<van-col span="24">
						<div style="padding-left: 15px; font-size: 14px;">*首次添加的收货地址将被设置为默认地址</div>
					</van-col>
				</div>
				<!--表单部分结束-->
				<van-row>
					<van-col span="20" offset="2">
						<van-button type="danger" size="large" @click="onSave">保存</van-button>					
					</van-col>
				</van-row>
			</section>
		</div>
		<script src="../../js/area.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					areaList:area,
					isShow:false,
					key:"",
					title:"新增地址",
					addressLists:"",
					checked:false,
					id:"",
					name:"",
					phone:"",
					address:"",
					region:"",
					disabled:false,
					detalregion:"",
					error_message:"",
				},
				mounted(){
					var _this=this;
					var wv=plus.webview.currentWebview();
					_this.key=localStorage.getItem("keys");
					ajax({//添加第一个地址时设置为默认地址
						url:"http://dsapi.ysd3g.com/API/MyShippingAddressList",
						type:"post",
						dataType:"JSONP",
						data:{key:_this.key},
						success:function(res){
							// console.log(res);
							if(res.Data.length==0){
								_this.checked=true;
								_this.disabled=true;
							}
						},
					});
					plus.key.addEventListener("backbutton",function(){//监听返回键
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					}); 
					_this.id=wv.Id;
					if(_this.id!=null){
						_this.title="编辑地址"
						ajax({//获取编辑时的收货地址
							url:"http://dsapi.ysd3g.com/API/MyShippingAddressList",
							dataType:"JSONP",
							data:{key:_this.key},
							success:function(res){
								if(res.Data.length==1){
									_this.disabled=true;
								};
								for(var i=0;i<res.Data.length;i++){
									if(res.Data[i].id=_this.id){
										_this.name=res.Data[i].name;
										_this.phone=res.Data[i].tel;
										_this.detalregion=res.Data[i].address;
										_this.checked=res.Data[i].IsDefault;
									};
								}
							},
						});
					}
				},
				methods:{
					back(){
						var wv=plus.webview.currentWebview();
						plus.webview.close(wv.id);
					},
					onSave(){
						var _this=this;
						if(!(/^1[34578]\d{9}$/.test(_this.phone))){//对输入的手机号进行验证
							_this.error_message="请输入正确的手机号";
							_this.$toast.fail("请输入正确的手机号");
						}
						else{
							if(_this.name==null){
								_this.$toast.fail("收货人不能为空")
							}
							else{
								if(_this.address==null){
									_this.$toast.fail("地区不能为空");
								}
								else{
									if(_this.detalregion==null){
										_this.$toast.fail("详细地址不能为空");
									}
									else{
										if(_this.id!=null){//判断是编辑地址还是添加地址
											ajax({
												url:"http://dsapi.ysd3g.com/API/EditShippingAddress",
												dataType:"JSONP",
												data:{
													key:_this.key,
													addressId:_this.id,
													name:_this.name,
													phone:_this.phone,
													districtCode:_this.region,
													address:_this.detalregion,
													isdefault:_this.checked
												},
												success:function(res){
													if (res.Error == false) {
														_this.$toast.success("修改地址成功");
														plus.webview.getWebviewById("Myaddress").reload(true);
														setTimeout(function(){
															var wv=plus.webview.currentWebview();
															plus.webview.close(wv.id);
														},1000);
													} else {
														_this.$toast.fail(res.Msg);
														
													}
												}
											})
										}else{
											ajax({
												url:"http://dsapi.ysd3g.com/API/AddShippingAddress",
												data:{
													key:_this.key,
													name:_this.name,
													phone:_this.phone,
													districtCode:_this.region,
													address:_this.detalregion,
													isdefault:_this.checked
												},
												dataType:"jsonp",
												success: function(res) {								
													if (res.Error == false) {
														_this.$toast.success("添加地址成功");
														plus.webview.getWebviewById("Myaddress").reload(true);
														setTimeout(function(){
															var wv=plus.webview.currentWebview();
															plus.webview.close(wv.id);
														},1000)
													} else {
														_this.$toast.fail(res.Msg);
													}
												}
											});
										}//请求结束
									}//判断详细地址
								}//判断地区
							}//判断收货人
						}//判断手机号
					},
					show(){
						this.isShow=!this.isShow;
					},
					cancel(){
						this.isShow=!this.isShow;
					},
					confirm(i){
						var _this=this;
						console.log(i);
						_this.region=i [i.length - 1].code;
						_this.address="";
						for(var j=0;j<i.length;j++){
							_this.address+=i[j].name+"/";
						}
						_this.isShow=!this.isShow;
					},
					Checkphone(){
						var _this=this;
						if(!(/^1[34578]\d{9}$/.test(_this.phone))){
							_this.error_message="请输入正确的手机号";
						}
						else{
							_this.error_message="";
						}
					}
				}
			})
		</script>
	</body>
</html>
